<template>
  <el-drawer
    size="17%"
    append-to-body
    :modal-append-to-body="false"
    :modal="false"
    title="节点信息"
    :visible.sync="drawer"
    :direction="direction"
    custom-class="drawer-container"
  >
    <div class="node-detail">
      <div class="node-detail-item flex">
        <div class="node-detail-label">节点名称：</div>
        <div class="node-detail-inner">{{ nodeDetail.name }}</div>
      </div>

      <div class="node-detail-item flex">
        <div class="node-detail-label">节点类型：</div>
        <div class="node-detail-inner">{{ nodeDetail.nodeType }}</div>
      </div>
    </div>

    <ul>
      <li
        label="属性名称"
        prop="name"
        v-for="item in nodeDetail.propertyStr"
        :key="item.value"
        class="flex node-detail-item"
      >
        <div class="node-detail-label">{{ item.label }}：</div>
        <div class="node-detail-inner">{{ item.value }}</div>
      </li>
    </ul>
  </el-drawer>
</template>

<script>
import { getNodeDetail } from '@/api/newknowledge/index.js'

export default {
  data() {
    return {
      drawer: false,
      direction: 'rtl',
      nodeDetail: {}
    }
  },
  mounted() {
    // 不用这个详情了，先注释
    // this.$bus.$on('drawer', value => {
    //   this.getNodeDetail(value)
    // })
  },
  methods: {
    getNodeDetail(value) {
      getNodeDetail({ nodeId: value.id }).then(response => {
        if (response.data.code === 500) {
          this.$message.error(response.data.message)
          return
        }
        this.nodeDetail = response.data.data
        // 把label和value都变成带双引号的字符串
        if (this.nodeDetail.propertyStr === null) return
        this.nodeDetail.propertyStr = this.nodeDetail.propertyStr.replace(
          /(?<!")\blabel\b(?=: )/g,
          '"label"'
        )
        this.nodeDetail.propertyStr = this.nodeDetail.propertyStr.replace(
          /(?<!")\bvalue\b(?=: )/g,
          '"value"'
        )
        this.nodeDetail.propertyStr = JSON.parse(this.nodeDetail.propertyStr)
        const nameIndex = this.nodeDetail.propertyStr.findIndex(
          item => item.label === 'name'
        )
        if (nameIndex !== -1) {
          this.nodeDetail.propertyStr.splice(nameIndex, 1)
        }
        this.drawer = true
      })
    }
  }
}
</script>

<style lang="scss">
.drawer-container {
  color: #fff;
  .el-drawer__header {
    color: #fff;
  }
  .el-drawer__body {
    padding: 0 20px;
  }
  .node-detail-item {
    padding: 12px 0;
    font-size: 14px;
  }
  .node-detail-label {
    width: 110px;
    display: inline-block;
    text-align: right;
  }
  .node-detail-inner {
    width: 120px;
    display: inline-block;
  }
}
</style>
